@{
    ViewData["Title"] = "选择客户";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>@ViewData["Title"]</title>
    <link rel="stylesheet" href="~/layui/css/layui.css">
    <style>
        .search-panel {
            padding: 15px;
            background: #f8f8f8;
            margin-bottom: 10px;
        }
        .table-container {
            padding: 0 15px;
        }
    </style>
</head>
<body>
    <!-- 搜索表单 -->
    <div class="search-panel">
        <form class="layui-form" lay-filter="searchForm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">客户编码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="customerCode" placeholder="请输入客户编码" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">客户名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="customerName" placeholder="请输入客户名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="button" class="layui-btn layui-btn-sm" id="btnSearch">搜索</button>
                    <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
                </div>
            </div>
        </form>
    </div>

    <!-- 数据表格 -->
    <div class="table-container">
        <table class="layui-table" lay-filter="customerTable" id="customerTable"></table>
    </div>

    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/layui/layui.js"></script>
    <script>
        layui.use(['table', 'form'], function(){
            var table = layui.table;
            var form = layui.form;
            var selectedCustomer = null;

            // 表格渲染
            var tableIns = table.render({
                elem: '#customerTable',
                url: '/Packing/GetCustomerSelectList',
                method: 'POST',
                page: true,
                request: {
                    pageName: 'page',
                    limitName: 'pageSize'
                },
                response: {
                    statusName: 'code',
                    statusCode: 0,
                    msgName: 'msg',
                    countName: 'count',
                    dataName: 'data'
                },
                cols: [[
                    {type: 'radio', width: 60},
                    {field: 'customerCode', title: '客户编码', width: 150},
                    {field: 'customerName', title: '客户名称', width: 200},
                    {field: 'customerType', title: '客户类型', width: 120},
                    {field: 'customerPhone', title: '联系电话', width: 150}
                ]]
            });

            // 搜索
            $('#btnSearch').on('click', function() {
                var formData = form.val('searchForm');
                tableIns.reload({
                    where: formData,
                    page: { curr: 1 }
                });
            });

            // 监听单选框选择
            table.on('radio(customerTable)', function(obj) {
                selectedCustomer = obj.data;
            });

            // 提供给父窗口调用的函数
            window.getSelectedCustomer = function() {
                return selectedCustomer;
            };
        });
    </script>
</body>
</html> 